<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>扇叶导航</title>
    <link rel="stylesheet" href="./assets/css/demo.css" />
  </head>
  <body>
    <section class="slideshow">
      <!-- 主页内容 -->
      <div class="content main-content" data-id="content-1">
        <div class="inner">
          <h2>简介</h2>
          <div class="description">
            <p>
              Hi！我是李渝，一年前的我还是一枚电气仔，突发奇想转战IT。我怀着无限的热情投入前端开发学习中，希望可以在工作中慢慢实现我对前端开发的种种期待！
            </p>
          </div>
        </div>
      </div>

      <div class="content main-content-1" data-id="content-2">
        <div class="inner">
          <h2>教育背景和工作经历</h2>
          <div class="description">
            <p>
              2017年毕业于大连海事大学 电气工程及其自动化专业
            </p>
            <p>2018年从许继电气股份有限公司离职转投我大前端的怀抱</p>
          </div>
        </div>
      </div>

      <div class="content main-content-2" data-id="content-3">
        <div class="inner">
          <h2>前端相关技能</h2>
          <div class="description">
            <p>
              前端三件套必懂，jquery差不多懂会用，bootstrap栅格布局和组件的运用记不住但会用，框架了解vue不是很精通也只是会用的阶段。
              捎带着会点webpack、git等辅助工具。
            </p>

            <a href="https://gitee.com/sex-luthor">点我看看！</a>
          </div>
        </div>
      </div>

      <div class="content main-content-3" data-id="content-4">
        <div class="inner">
          <h2>关于我自己</h2>
          <div class="description">
            <p>
              个人喜好钻研，做事严谨。平时喜欢关注一些前端方面新闻啊或者一些开发者大会什么的，虽然看不大懂，但是了解起手后续继续学
            </p>
            <p>个人最大爱好是电子竞技💻和游泳🏊‍♀️</p>
          </div>
        </div>
      </div>

      <!-- 分块背景 -->
      <div class="background main-background"></div>
      <div class="background main-background-1"></div>
      <div class="background main-background-2"></div>
      <div class="background main-background-3"></div>

      <!-- 导航圆盘 -->
      <ul class="navigation">
        <li data-id="1" data-rotation="0" data-bcg=" ">
          <span>ONE</span>
        </li>
        <li data-id="2" data-rotation="90" data-bcg="">
          <span>TWO</span>
        </li>
        <li data-id="3" data-rotation="180" data-bcg="assets/img/ ">
          <span>THREE</span>
        </li>
        <li data-id="4" data-rotation="270" data-bcg="assets/img/ ">
          <span>FOUR</span>
        </li>
      </ul>
    </section>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
    <script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js"></script>
    <script src="assets/js/demo.js"></script>
  </body>
</html>
